<template>
	<view>

		<!-- 页首 -->
		<zw-header ></zw-header>

		<!-- 面包屑 -->
		<bread-crumb :pages="pageName"></bread-crumb>

		<!-- 类别栏 -->
		<filter-list name="类别" :list="categories" :activeIndex="categoryIndex" @change="categoryChange"></filter-list>
		<!-- 排序方式 -->
		<view class="sort">
			<view class="sortList">
				<view class="label elip">筛选：</view>
				<view class="list">
					<block v-for="(item, index) in sortModes" :key="index">
						<view class="item">
							<text :class="['name elip', {'active': sortIndex == index}]" @click="change(index)">
								{{item}}
							</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 主体内容 -->
		<view class="search-wrapper">
			<view class="wrap">
				
				
				<!-- 商品列表 -->
				<view class="goods-wrap" v-if="!nullInfo">
					<block v-for="(item, index) in goodsList" :key="index">
						<navigator class="goods" :url="`/pages/goods/comDet?id=${item.id}`">
							<view class="goodsItem">
								
								<u-lazy-load 
								 height='194px' 
								 style='width: 194px;display: flex;justify-content: center;'
								 :image="item.cover.split(',')[0]" 
								 img-mode="heightFix"
								 :duration='300'
								 ></u-lazy-load>
								<view class="goodsPrice">
									<text class="price">¥{{item.price}}<text class="market" v-if="item.marketPrice">¥{{item.marketPrice}}</text></text>
								</view>
								<view class="goodsName elip_2">{{item.combinationName}}</view>
								<view class="goodsTip">
									<!-- <text>赚{{goods.profit}}元</text> -->
									<text></text>
									<!-- <text>{{item.sellNum}}人付款</text> -->
									<text>{{item.sellerName}}</text>
								</view>
							</view>
						</navigator>
					</block>
				</view>
				<view class="goods-empty" v-else>
					<image src="../../static/image/common/nullInfo.png"></image>
					抱歉，没有找到符合条件的商品~
				</view>

				<!-- 分页条 -->
				<pagination :pageNumber="pageNum" :totalSize="totalSize" @change="pageChange"></pagination>
			</view>
		</view>

		<!-- 今日推荐 -->
		<!-- <recommend title="猜你喜欢"></recommend> -->

		<!-- 页脚 -->
		<view class="bottom">
			<zw-footer></zw-footer>
		</view>

	</view>
</template>

<script>
	import filterList from '@/components/search/filter-list.vue';
	import pagination from '@/components/common/pagination.vue';
	import recommend from '@/components/goods/recommend.vue';

	export default {
		components: {
			filterList,
			pagination,
			recommend
		},
		data() {
			return {
				type: '',
				categories: [],
				categoryIndex: 0,
				categoryId: '',
				sortModes: ['热门', '销量', '最新'],
				sortIndex: 0,
				goodsList: [],
				pageNum: 1,
				totalSize: 0,
				nullInfo:false,
				isHot: 1,
				onSellDesc: 0,
				soldNumDesc: 0,
				pageName:'推广体验套餐'
			}
		},
		onLoad(e) {
			if (e.type){
				this.type = e.type;
				if(this.type==1){
					this.pageName = '服务体验套餐'
				}
			} 
			this.initFilters();
			this.search();
		},
		
		methods: {
			
			initFilters() {
				uni.request({
					url: this.serverUrl + '/user/productCategory/list',
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.categories = res.data.data.list
							var data = {
								id: '',
								typeName: '全部'
							}
							this.categories.unshift(data)
							if (this.categoryId != -1) {
								this.categoryIndex = this.categories.findIndex(e => e.id == this.categoryId);
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
				
				
			},
			search() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				var that = this
				var params = {
					pageNum: that.pageNum,
					pageSize: 30,
					isHot: that.isHot,
					onSellDesc: that.onSellDesc,
					soldNumDesc: that.soldNumDesc,
					cateId: that.categoryId,
					type:that.type
				}
				
				uni.request({
					url: this.serverUrl + '/user/product/combinationList',
					method: 'POST',
					data: params,
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code == 0 || res.data.code == 200) {
							that.currentMax = res.data.data.totalPage;
							that.totalSize = res.data.data.totalCount;
							that.goodsList = res.data.data.list;
							if (that.goodsList.length == 0) {
								that.nullInfo = true
							} else {
								that.nullInfo = false
							}
						} else {
							that.nullInfo = true
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
				
			},
			change(index){
				this.sortIndex = index;
				this.goodsList = [];
				if (index ==  0) {
					this.isHot = 1
					this.soldNumDesc = 0
					this.onSellDesc = 0
					this.search()
				}else if(index == 1){
					this.isHot = 0
					this.soldNumDesc = 1
					this.onSellDesc = 0
					this.search()
				}else{
					this.isHot = 0
					this.soldNumDesc = 0
					this.onSellDesc = 1
					this.search()
				}
			},
			categoryChange(index) {
				this.categoryIndex = index;
				this.categoryId = this.categories[index].id;
				this.goodsList = [];
				this.search();
			},
			
			
			thumbSwitch(index, item, thumbIndex) {
				item.activeThumb = thumbIndex;
				// 触发页面更新
				this.$set(this.goodsList, index, item);
			},
			pageChange(e) {
				this.pageNum = e;
				this.goodsList = [];
				this.search();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			}
		}
	}
</script>

<style lang="scss">
	
	.search-wrapper {
		background-color: $bg-color-grey;

		.wrap {
			max-width: $page-width;
		min-width: $page-minwidth;
			margin: 0 auto;
			padding: 20px 0 100px;
			background-color: $bg-color-grey;

			.sort-wrap {
				margin: 20px 0;
				@extend %flex-align-center;

				.item {
					padding: 0 30px;
					border-left: 1px solid #e0e0e0;
					line-height: 20px;
					@extend %flex-align-center;

					&:first-child {
						border-left: none;
					}

					&.active,
					&:hover {

						.name,
						.icon {
							color: $color-primary;
						}
					}

					.name {
						color: #424242;
						transition: color .2s;
						cursor: pointer;
					}

					.icon {
						font-size: 20px;
						font-weight: bold;
						color: #424242;
						cursor: pointer;
						transition: transform .3s;

						&.down {
							transform: rotate(180deg);
						}
					}
				}
			}

			.goods-wrap {
				display: flex;
				flex-wrap: wrap;
				width: 1240px;

				.goods {
					position: relative;
					width: 224px;
					height: 300px;
					padding: 15px 0;
					margin-right: 14px;
					margin-bottom: 14px;
					background-color: $bg-color;
					transition: box-shadow .3s linear;
					display: flex;
					flex-direction: column;
					align-items: center;
					.goodsItem{
						image{
							width: 194px;
							height: 194px;
						}
						display: flex;align-items: center;flex-direction: column;
						width: 194px;
						background-color: #fffff;
						cursor: pointer;
						.goodsName{
							padding: 0 10px;width: 100%;color: #4f4f4f;font-size: 15px;
							display: flex;justify-content: flex-start;align-items: center;
						}
						.goodsTip{
							display: flex;justify-content: space-between;align-items: center;
							padding: 0 10px;width: 100%;color: #999;font-size: 12px;position: absolute;
							bottom:10px;right: 2px;
						}
						.goodsPrice{
							padding: 8px 10px 5px 10px;width: 100%;
							display: flex;justify-content: flex-start;align-items: center;
							.price{
								font-size: 22px; font-weight: 700;color: #e93323;
							}
							.market{
								color: #aaa;font-weight: 500;
								font-size: 12px;
								text-decoration: line-through;
								margin-left: 8px;
							}
						}
					}
					&:hover {
						box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
					}

					.thumb {
						width: 200px;
						height: 200px;
						cursor: pointer;
						margin-bottom: 16px;
					}

					.name {
						color: $text-color;
						width: 230px;
						margin-bottom: 3px;
						font-weight: 400;
						cursor: pointer;
						text-align: center;
					}


					.thumbs {
						@extend %flex-align-center;

						.thumb-mini {
							width: 34px;
							height: 34px;
							margin: 0 4px;
							border: 1px solid #e0e0e0;
							cursor: pointer;
							transition: border-color .2s linear;

							&.active,
							&:hover {
								border-color: $color-primary;
							}
						}
					}
				}
			}

			.goods-empty {
				color: $text-color;
				height: 650px;
				width: 100%;
				display: flex;align-items: center;justify-content: center;flex-direction: column;
			}
		}
	}
	.sort {
		background-color: $bg-color;
	
		.sortList {
			max-width: $page-width;
		min-width: $page-minwidth;
			margin: 0 auto;
			display: flex;
			min-height: 60px;
			position: relative;
	
			&.separator {
				border-top: 1px solid $border-color;
			}
	
			.label {
				color: #b0b0b0;
				min-width: 45px;
				line-height: 60px;
			}
			.list {
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;
				transition: height .3s ease-in;
			
				.item {
					width: 105px;
					height: 60px;
					line-height: 60px;
					text-align: center;
					.name {
						max-width: 145px;
						display: inline-block;
						color: #424242;
						cursor: pointer;
			
						&.active,
						&:hover {
							color: $color-primary;
						}
					}
				}
			}
		}
	}
</style>
